<template>
    <div class="mv-res">
        <div class="result">
            <h3>搜索{{keywords}},找到{{mvCount}}个MV</h3>
        </div>
        <Mvlist :mvs="mvs"/>
         <div class="pageinatin">
                <!-- @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :hide-on-single-page="true"
                :page-sizes="[30, 50, 100]"
                :page-size="pageSize"
                layout="prev, pager, next, jumper,total,sizes"
                :total="mvCount">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import Mvlist from '@/components/content/mvlist/Mvdetail.vue'
export default {
    name: "",
    components: { Mvlist },
    data() {
        return {
            keywords:"",
            currentPage:1,
            pageSize:30,
            mvCount:0,
            mvs:[]

        };
    },
    created() {
        this.keywords = this.$route.params.keywords
        this.getSearchMvBy();
    },
    methods: {
        async getSearchMvBy(){
          let offset = (this.currentPage - 1) * this.pageSize;
          let resMv = await this.$API.searchdetail.getSearchMVList(this.keywords,offset,this.pageSize);
          if(resMv.code == 200){
            this.mvs = resMv.result.mvs;
            this.mvCount = resMv.result.mvCount;
          }
        },
        // 分页事件
        handleCurrentChange(page){
            this.currentPage = page;
            this.getSearchMvBy();
        },
        handleSizeChange(size){
            this.currentPage = 1;
            this.pageSize = size;
            this.getSearchMvBy();
        }
    },

}
</script>
<style lang="less" scoped>
    .mv-res{
        .result{
            h3{
                margin: 10px 10px;
            }
        }
        .pageinatin{
            text-align: center;
        }
    }
</style>